<template>
  <div v-enter-helper="getList" class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form
            ref="listQuery"
            :inline="true"
            :model="listQuery"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-input
                v-model="listQuery.name"
                clearable
                placeholder="请输入姓名"
                type="text"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div v-loading="listLoading" class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
          row-key="id"
          style="width:100%;margin-bottom: 20px;"
        >
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="身份证号" prop="id_number"></el-table-column>
          <!-- <el-table-column label="性别" prop="sex">
            <template slot-scope="scope">
              <p v-if="scope.row.sex === 1">男</p>
              <p v-if="scope.row.sex === 2">女</p>
            </template>
          </el-table-column> -->
          <el-table-column label="加入时间" prop="created_at">
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <!-- <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>
                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)" plain>删除</el-button> -->
              <el-button
                plain
                size="mini"
                type="danger"
                @click="handleBlacklist(scope.row)"
              >移出黑名单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :limit.sync="listQuery.per_page"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {listData, deleteData} from "@/api/member/blackList";

export default {
  data() {
    return {
      confirmBtn: false,

      // 要修改的当前行的id
      row_id: 0,
      editRulesForm: {
        reason: undefined,
        app_status: 1
      },
      listLoading: false,
      menuList: [],
      listQuery: {
        page: 1,
        per_page: 10,
        name: undefined
      },
      total: 0,
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      
      listData(this.listQuery).then(response => {
        // response)
        this.menuList = response.data.list;
        this.total = response.data.meta.total;
        this.listLoading = false;
        this.confirmBtn = false;
      });
    },
    // 查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 重置
    resetSubmit() {
      this.listQuery.page = 1;
      this.listQuery.per_page = 10;
      this.listQuery.name = undefined;
      this.getList()
    },
    DeleteData(data) {
      deleteData(data).then(res => {
        if(res.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      })
    },
    handleBlacklist(row) {
      this.$confirm('是否移出黑名单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.DeleteData(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });          
      });
    }
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
